﻿var app = new Vue({
    el: "#app",
    data: function() {
        return {
            visible: {
                form: false,
                pwd: false
            },
            loading: {
                table: true,
                save: false,
                pwd: false
            },
            disabled: false,
            changePwd: {
                oldPwd: "",
                newPwd: "",
                confirmPwd: ""
            },
            page: {
                pageIndex: 1,
                pageSize: 10,
                total: 0
            },
            search: {
                name: ""
            },
            form: {},
            rules: {
                CusomerName: [
                    { required: true, message: "请输入公司名称", trigger: "blur" }
                ],
                Domain: [
                    { required: true, message: "请输入网站域名", trigger: "blur" }
                ],
                Supplier: [
                    { required: true, message: "请选择主机供应商", trigger: "change" }
                ],
                FtpStr: [
                    { required: true, message: "请输入FTP地址", trigger: "blur" }
                ],
                FtpUserName: [
                    { required: true, message: "请输入FTP账号", trigger: "blur" }
                ],
                FtpPassword: [
                    { required: true, message: "请输入FTP密码", trigger: "blur" }
                ],
                DataBaseType: [
                    { required: true, message: "请选择主机供应商", trigger: "change" }
                ],
                DatabaseStr: [
                    { required: true, message: "请输入数据库地址", trigger: "blur" }
                ],
                DatabaseName: [
                    { required: true, message: "请输入数据库名称", trigger: "blur" }
                ],
                DatabaseUser: [
                    { required: true, message: "请输入数据库账号", trigger: "blur" }
                ],
                DatabasePwd: [
                    { required: true, message: "请输入数据库密码", trigger: "blur" }
                ],
                SignUser: [
                    { required: true, message: "请输入签约商务", trigger: "blur" }
                ],
                SignTime: [
                    { required: true, message: "请输入签约时间", trigger: "blur" }
                ],
                SignYear: [
                    { required: true, message: "请输入签约年限", trigger: "blur" }
                ],
                oldPwd: [
                    { required: true, message: "请输入旧密码", trigger: "blur" }
                ],
                newPwd: [
                    { required: true, message: "请输入新密码", trigger: "blur" }
                ],
                confirmPwd: [
                    { required: true, message: "请确认新密码", trigger: "blur" }
                ]
            },
            tableData: []
        }
    },
    created: function() {
        this.initFormData();
        this.initLoading();
    },
    methods: {
        initFormData() {
            var form = {
                Id: 0,
                CusomerName: "",
                Domain: "",
                TestDomain: "",

                DomainType: 0,
                Version: 0,
                Supplier: 0,
                HostType: 0,

                FtpStr: "",
                FtpUserName: "",
                FtpPassword: "",

                DataBaseType: 0,
                DatabaseStr: "",
                DatabaseName: "",
                DatabaseUser: "",
                DatabasePwd: "",

                SignUser: "",
                SignTime: "",
                SignYear: "",

                Remark: ""
            };
            this.form = form;
        },
        initLoading() {
            
        },
        getTableData() {
            var $this = this;
            $this.loading.table = true;
            axios.get(`/api/GetList?page=${$this.page.pageIndex}&limit=${$this.page.pageSize}`,
                { params: $this.search }).then(function(result) {
                $this.tableData = result.data.data;
                $this.page.total = result.data.count;
                $this.loading.table = false;
            });
        },
        handleCurrentChange(val) {
            this.page.pageIndex = val;
            this.getTableData();
        },
        handleCommand(command) {
            if (command === "pwd") {
                var $this = this;
                $this.visible.pwd = true;
            } else if (command === "out") {
                location.href = "/Home/SignOut";
            }
        },
        handleAdd() {
            var $this = this;
            $this.visible.form = true;
            $this.disabled = false;
            $this.initFormData();
        },
        handleEdit(val) {
            var $this = this;
            $this.visible.form = true;
            $this.disabled = false;
            axios.get(`/api/GetModel?id=${val}`).then(function(result) {
                $this.form = result.data;
            });
        },
        handleSave(formName) {
            var $this = this;
            $this.loading.save = true;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    axios.post("/api/AddOrUpdateModel", $this.form).then(function(response) {
                        var result = response.data;
                        if (result.success === true) {
                            $this.$message.success(result.message);
                            $this.visible.form = false;
                            $this.getTableData();
                        } else {
                            $this.$message.error(result.message);
                        }
                        $this.loading.save = false;
                    });
                }
            });
        },
        handleView(val) {
            var $this = this;
            this.visible.form = true;
            this.disabled = true;
            axios.get(`/api/GetModel?id=${val}`).then(function(result) {
                $this.form = result.data;
            });
        },
        handleCopy(obj) {
            var $this = this;

            var str = obj.CusomerName + " \t" + obj.Supplier + "\n";
            str += "网站域名：" + obj.Domain + " \t测试域名：" + obj.TestDomain;
            str += "\n";
            str += "\nFTP连接：" + obj.FtpStr + " \nFTP用户名：" + obj.FtpUserName + " \nFTP密码：" + obj.FtpPassword;
            str += "\n\n";
            str += "数据库连接：" +
                obj.DatabaseStr +
                " \n数据库名称：" +
                obj.DatabaseName +
                " \n数据库用户名：" +
                obj.DatabaseUser +
                " \n数据库密码：" +
                obj.DatabasePwd;

            var clipboard = new ClipboardJS("#btn-copy",
                {
                    text: function(trigger) {
                        return str;
                    }
                });

            clipboard.on("success",
                e => {
                    $this.$message.success("复制成功");
                    e.clearSelection();
                    clipboard.destroy();
                });
            clipboard.on("error",
                e => {
                    $this.$message.error("复制失败");
                    e.clearSelection();
                    clipboard.destroy();
                });
        },
        dateFormat1(val) {
            var date = moment(val).format('YYYY-MM-DD');
            return date;
        },
        dateFormat2(val) {
            var date = moment(val).format('YYYY-MM-DD HH:mm');
            return date;
        },
        changePassword(formName) {
            var $this = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    var pwd = {
                        oldPwd: $this.changePwd.oldPwd,
                        newPwd: $this.changePwd.newPwd,
                        confirmPwd: $this.changePwd.confirmPwd
                    };
                    $this.loading.pwd = true;
                    axios.post("/Api/changePwd", pwd).then(function(response) {
                        var result = response.data;
                        if (result.success === true) {
                            $this.$message.success(result.message);
                            $this.loading.pwd = false;
                            $this.visible.pwd = false;
                        } else {
                            $this.$message.error(result.message);
                        }
                    });
                }
            });
        }
    },
    mounted: function() {
        this.getTableData();
    }
})